:root,
:root.ink\:dark-theme {
  /* Background */
  --ink-background-dark: rgba(18, 17, 24);
  --ink-background-light: rgb(45, 45, 52);
  --ink-background-container: rgba(187, 180, 255, 0.05);

  /* Button */
  --ink-button-primary: rgb(113, 50, 245);

  /* Text */
  --ink-text-default: rgb(255, 255, 255);
  --ink-text-on-primary: rgba(255, 255, 255, 1);
  --ink-text-on-secondary: rgba(138, 97, 255, 1);

  /* Status */
  --ink-status-success: rgb(61, 166, 103);
  --ink-status-alert: rgb(231, 149, 74);
  --ink-status-error: rgb(236, 109, 109);
}

/*
  This allows us to use the dark theme over the light theme by default, depending on user preference.
  The overrides should _exactly_ match the variables above.
*/
@media (prefers-color-scheme: dark) {
  :root {
    /* Background */
    --ink-background-dark: rgba(18, 17, 24);
    --ink-background-light: rgb(45, 45, 52);
    --ink-background-container: rgba(187, 180, 255, 0.05);

    /* Button */
    --ink-button-primary: rgb(113, 50, 245);

    /* Text */
    --ink-text-default: rgb(255, 255, 255);
    --ink-text-on-primary: rgba(255, 255, 255, 1);
    --ink-text-on-secondary: rgba(138, 97, 255, 1);

    /* Status */
    --ink-status-success: rgb(61, 166, 103);
    --ink-status-alert: rgb(231, 149, 74);
    --ink-status-error: rgb(236, 109, 109);
  }
}
